<template>
  <div class="edit-viewpoint-container">
    <textarea v-if="status === 'edit'" class="viewpoint-container"
     :class="{'no-content-style':!currentValue,'content-style':currentValue}" 
     placeholder="您可以在这里输入观点,若无内容分享后将不会进行展示" maxlength="140" @blur="blurHandler" v-model="currentValue" @input="viewpointAreaClick"></textarea>
    <span class="limit-char">{{limitSize}}</span>
    <div v-if="status === 'view' && currentValue !==''" class="discover-viewpoint">
      <div class="viewpoint-line"></div>
      <div class="viewpoint-top">
        <div style="color:#333333;font-size:18px;font-weight:bold;">观点</div>
        <div class="viewpoint-right">
        </div>
      </div>
      <div class="viewpoint-content content-style">{{currentValue}}</div>
    </div>
    <van-popup class="write-board" v-model="viewpointEditShow" position="bottom">
      <p class="write-title">发表观点</p>
      <div class="pull-btn" @click="viewpointPullHandler">发布</div>
      <textarea class="write-content" maxlength="140" v-model="tempValue" @blur="blurHandler"/>
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    value: { type: String, default: '' },
    status: { type: String, default: 'edit' }
  },
  data: () => ({
    viewpointEditShow: false,
    currentValue: '',
    tempValue: '',
    limitSize:140,
  }),
  methods: {
    viewpointAreaClick() {
      // this.viewpointEditShow = true
      // this.tempValue = this.currentValue
      let subLimitSize = 140 - this.currentValue.length
      this.limitSize = subLimitSize<0?0:subLimitSize;
    },
    viewpointPullHandler() {
      // this.viewpointEditShow = false
      // this.currentValue = this.tempValue
      sessionStorage.setItem("viewpointText",this.tempValue);
    },
    focusHandle(){
    },
    blurHandler() {
      document.activeElement.scrollIntoViewIfNeeded(true)
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
      this.tempValue = val
    },
    currentValue(val) {
      this.$emit('input', val)
    }
    // tempValue(val){
    //   this.currentValue = val
    // }
  }
}
</script>
<style lang="less">
textarea{
  outline: none;
  border-color: transparent;
}
.edit-viewpoint-container {
  // margin: 0 -5px;
  font-size: 14px;
  color: #13294f;
  // padding: 5px;
  position: relative;
  line-height: normal;
  > .viewpoint-container {
    width: 100%;
    height: 98px;
    resize: none;
    word-break: break-all;
    background: rgba(0,122,230,0.1);
    padding: 7px 9px;
    box-sizing: border-box;
    border-radius: 0;
    position: relative;
    border-color:#007AE6;
    border-width:1px;
    border-style:dashed;
    box-shadow:0px 0px 0px rgba(0,0,0,0); 
    -webkit-appearance:none;
  }
  .limit-char{
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 16px;
    color: #9CA5B5;
    line-height: 24px;
  }
  .no-content-style{
    color: #9CA5B5;
    font-size: 16px;
  }
  .content-style{
    color: #13284D;
    font-size: 16px;
  }
  > .discover-viewpoint {
    // margin: 20px 16px;
    padding: 16px;
    position: relative;
    box-sizing: border-box;
    border: 1px dashed rgba(0,122,230,0.5);
    > .viewpoint-line {
      width: 2px;
      height: 13px;
      background-color: #007ae6;
      position: absolute;
      top: 22px;
      left: 0;
    }
    > .viewpoint-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      > .viewpoint-right {
        display: flex;
        > .viewpoint-name {
          margin-left: 7px;
          margin-top: -5px;
        }
      }
    }
    > .viewpoint-content {
      color: #40516F;
      font-size: 16px;
      // font-weight: bold;
      margin-top: 20px;
      line-height: 1.5;
    }
  }
  > .write-board {
    height: 187px;
    > .pull-btn {
      position: absolute;
      transform: translate(-50%, -50%);
      top: 30px;
      right: -15px;
      font-size: 14px;
      font-weight: 400;
      background: #007ae6;
      border-radius: 100px;
      color: #fff;
      padding: 5px 21px;
    }
    > .write-title {
      font-size: 20px;
      color: #333333;
      padding: 18px 16px;
      font-weight: 600;
    }
    > .write-content {
      font-size: 16px;
      color: #13294f;
      border: none;
      margin: 0 15px;
      padding: 8px;
      width: 345px;
      height: 112px;
      letter-spacing: 1px;
      background: rgba(150, 158, 168, 0.08);
      resize: none;
    }
  }
}
</style>
